<template>
  <mt-popup v-model="popupVisible" position="right" class="store-choice" :modal="false">
    <div class="page">
      <div class="scroll-view">
        <customHeader middleTitle="门店列表" @leftCallBack="back" :jsBridgeBack="false" />
        <div class="tip-msg" v-if="tipMsg">{{tipMsg}}</div>
        <div class="totalCount">涉及到的门店{{selectCount}}家</div>
        <div class="scroll-ct page-body">
          <div
            class="store-choice-list"
            v-for="(item,index) in listData"
            :key="index"
          >
            <div class="head">{{item.head}}</div>
            <div class="item" v-for="(childitem,index) in item.children" :key="index">
              <div class="item-ct">
                <span>{{childitem.label}}</span>
              </div>
            </div>
          </div>
          <noData msg="暂无数据" v-if="listData.length===0" />
        </div>
      </div>
    </div>
  </mt-popup>
</template>

<script>
import Vue from "vue";
import { Popup, Toast } from "mint-ui";
import customHeader from "../../components/header/header";
import noData from "../../components/noData/noData";
Vue.component(Popup.name, Popup);
export default {
  name: "StoreDetails",
  data() {
    return {
      selectCount:0,
      listData: [],//门店列表数据
      popupVisible: false,
      dataSource: [],//接口返回的data
    };
  },
  props: {
    //父组件传过来的数据源
    sourceData: Object,
    //门店列表的请求接口地址（默认请求：/newapp/shop/getShopSelect.do）
    reqParams: {
      type: Object,
    },
    //是否过滤掉其他状态门店，只显示审核通过的门店
    statusFilter: {
      type: Boolean,
      default: false
    },
    tipMsg:{
      type: String,
    }
  },
  methods: {
    popupShow() {
      this.popupVisible = true;
    },

    back() {
      this.popupVisible = false;
    },

    checkDataSource(data, currentSelect) {
      let shopList = [];
      if (data != null && JSON.stringify(data) != "{}") {
        for (var cityName in data) {
          var childrenList = [];
          if (data[cityName] != null && data[cityName].length > 0) {
            for (var i = 0; i < data[cityName].length; i++) {
              if (!this.statusFilter || (this.statusFilter && (data[cityName][i].auditStatus !== 1 && data[cityName][i].auditStatus !== 3))) {
                childrenList.push({
                  key: data[cityName][i].shopId,
                  label: data[cityName][i].shopName,
                });
              }
            }
          }
          childrenList.length > 0 &&
            shopList.push({
              head: cityName,
              children: childrenList,
            });
        }
      }
      this.getSelectCount(shopList);
      return shopList;
    },
    getData() {
      if (this.sourceData) {
        this.listData = this.checkDataSource(this.sourceData, this.currentSelect);
        return;
      }
      if (!this.reqParams.url) {
        this.reqParams = { url: "/newapp/shop/getShopSelect.do", type: "get", data: null };
      }
      this.ajax({
        url: this.reqParams.url,
        type: this.reqParams.type,
        data: this.reqParams.data,
        controlLoading: false
      })
        .then(res => {
          if (res.success) {
            const data = res.resultObject;
            this.dataSource = data;
            this.listData = this.checkDataSource(data, this.currentSelect);
          }else{
            Toast(res.msg);
          }
        })
        .catch(function (err) {

        });
    },
     getSelectCount(listData){
      let selectCount=0;
      for (let i = 0; i < listData.length; i++) {
        selectCount=selectCount+listData[i].children.length;
      }
      this.selectCount=selectCount;
    }
  },
  components: {
    customHeader,
    noData
  },
  watch: {
    popupVisible(newVal, oldVal) {
      if (newVal) {
        this.getData();
      }
    },
  }
};
</script>

<style lang="scss" scoped>
@import "StoreChoice";
</style>
